<template>
	<view class="content">
		<view class="reservation-form">
			<view class="reservation-form-li flex po">
				<view class="reservation-form-li-left">
					收货人     
				</view>
				<view class="reservation-form-li-right">
					<input v-model="data.realname" placeholder-style="color:#c3c3c3" class="uni-input" name="input" placeholder="请输入收货人" />
				</view>
			</view>
			<view class="reservation-form-li flex po">
				<view class="reservation-form-li-left">
					联系电话     
				</view>
				<view class="reservation-form-li-right">
					<input v-model="data.mobile" placeholder-style="color:#c3c3c3" class="uni-input" name="input" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="reservation-form-li flex po">
				<view class="reservation-form-li-left">
					所在地区     
				</view>
				<view class="reservation-form-li-right">
					<input disabled="" @click="showMulLinkageThreePicker" placeholder-style="color:#c3c3c3" class="uni-input" name="input" placeholder="请选择所在地区" v-model="pickerText" />
				</view>
			</view>
			<view class="reservation-form-li flex po">
				<view class="reservation-form-li-left">
					详细地址          
				</view>
				<view class="reservation-form-li-right">
					<input v-model="data.address_details" placeholder-style="color:#c3c3c3" class="uni-input" name="input" placeholder="请输入详细地址" />
				</view>
			</view>			
		</view>
		<view class="uni-list mt1">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">设为默认地址</view>
				<switch :checked="is_default" color="#e73f3f"  @change="switch1Change" />
			</view>
		</view>
		<view class="foot" @click="post">
			保存地址
		</view>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import {
        mapState,
        mapMutations
    } from 'vuex'
	
	export default {
		computed: {
            ...mapState(['token'])
        },
		components: {
			mpvueCityPicker
		},
		onLoad(event) {
			let _this = this
			// TODO 后面把参数名替换成 payload 
			const payload = event.detailDate || event.payload;
			if(payload){
				uni.setNavigationBarTitle({
					title: '编辑地址'
				});
				// 目前在某些平台参数会被主动 decode，暂时这样处理。
				try {
					this.data = JSON.parse(decodeURIComponent(payload));
					this.id = this.data.id
					this.data.is_default==1 ? this.is_default = true : this.is_default = false,
					this.pickerText = this.data.address_name
					//console.log(JSON.stringify(JSON.parse('['+this.data.mark+']')))
					setTimeout(()=>{
						this.cityPickerValueDefault = JSON.parse('['+this.data.mark+']')
					},1000)
				} catch (error) {
					this.data = JSON.parse(payload);				
					this.id = this.data.id
					this.data.is_default==1 ? this.is_default = true : this.is_default = false,
					this.pickerText = this.data.address_name
					setTimeout(()=>{
						this.cityPickerValueDefault = JSON.parse('['+this.data.mark+']')
					},1000)
				}
			}
		},
		data() {
			return {
				cityPickerValueDefault: [0,0,0],
				themeColor: '#007AFF',
				pickerText: '',
				is_default: false,
				data: {
					"mobile": '',
					"realname": '',
					"mark": '',
					"is_default": 0,
					"provinces": '',
					"city": '',
					"area": '',
					"address_details":""
				},
				id: '',
				type: true
			}
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			switch1Change: function (e) {
				console.log(e.target.value)
				e.target.value ? this.data.is_default = 1 : this.data.is_default = 0
			},
			onCancel(e) {
				console.log(e)
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				console.log(e)
				this.pickerText = e.label
				this.data.provinces = e.provincesCode
				this.data.city = e.cityCode
				this.data.area = e.areaCode
				this.data.mark = ''+e.value+''
				console.log(this.data)
			},
			post() {	//保存地址
				let _this = this
				if(!this.data.realname){
					uni.showToast({
						title: "请输入收货人",
						icon: 'none',
						position:'bottom'
					})
					return !1
				}
				if(!this.data.mobile){ 
					uni.showToast({
						title: "联系电话有误，请重填",
						icon: 'none',
						position:'bottom'
					})
					return false; 
				}
				if(!this.data.provinces || !this.data.city){
					uni.showToast({
						title: "请选择所在地区",
						icon: 'none',
						position:'bottom'
					})
					return !1
				}
				if(!this.type){
					return !1
				}
				this.type = false
				//console.log(JSON.stringify(this.data))
				let Url = '',Type = ''
				if(this.id){	// 地址id存在 则是修改地址
					delete this.data.created_at	//	删除对象中的时间
					delete this.data.updated_at//	删除对象中的时间
					console.log('保存' + JSON.stringify(this.data))
					Url = '/api/v2/member/address/' + this.data.id,Type = 'PUT'
				}else{
					Url = '/api/v2/member/address/create',Type = 'POST'
				}	
							
				this.vuexRequest({
					url: Url + '?access-token=' + this.token,
					method: Type,
					data: this.data,
					success: (res)  => {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							position:'bottom'
						})
						uni.navigateBack()
					},
					fail: (err)  => {
						this.type = true
						uni.showToast({
							title: err.data.message,
							icon: 'none',
							position:'bottom'
						})
					},
				})			
			}
		},
		onBackPress() {
		  if (this.$refs.mpvueCityPicker.showPicker) {
			this.$refs.mpvueCityPicker.pickerCancel();
			return true;
		  }
		},
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		}
	}
</script>

<style>
	.mt1{
		margin: 20upx  0 0 0;
	}
	.flex{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.po{
		position: relative;
	}
	.po:after{
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.uni-input{
		margin: 0;
	}
	.reservation-form-li{
		background: #FFFFFF;
		padding: 10upx 30upx;
	}
	.reservation-form-li-right{
		width: 75%;
	}
	.store-ad{
		width: 750upx;
		height: 356upx;
	}
	.reservation-form-li-radio{
		padding: 30upx;
	}
	.foot{
		position: fixed;
		bottom: 0;
		color: #FFFFFF;
		width: 100%;
		height: 100upx;
		background: #f54336;
		text-align: center;
		line-height: 100upx;
		z-index: 20;
	}
	.content{
		padding: 0 0 120upx 0;
	}
</style>
